<template>
  <div class="container">
    <el-tabs type="border-card">
      <el-tab-pane label="注册举报">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="城市名称">
            <el-select
                @focus="getCity"
                v-model="neuTask.cityId"
                placeholder="请选择城市"
                filterable
            >
              <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="item.city"
                  :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="问题详情">
            <el-input
                type="textarea"
                :autosize="{ minRows: 10, maxRows: 10 }"
                v-model="neuTask.message"
                placeholder="请输入内容"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit(neuTask)">提交举报</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="匿名举报">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="城市名称">
            <el-select
              @focus="getCity"
              v-model="cityId"
              placeholder="请选择城市"
              filterable
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.city"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题详情">
            <el-input
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 10 }"
              v-model="desc"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交举报</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'Report',
  data() {
    return {
      neuTask: {
        //举报城市id
        cityId: "",
        //举报信息
        message: "",
      }
    }
  },
  methods: {
    //获取城市
    async getCity() {
      await this.$store.dispatch("detail/getCityList");
    },

    //举报
    async onSubmit(neuTask) {
      let flag = await this.$store.dispatch("task/getNeuTask", neuTask);
      if (flag.code == 200){
        this.$message({
          showClose: true,
          message: flag.msg,
          type: "success",
          offset: "70",
        });
      }
    },
  },
  computed: {
    // 城市列表
    ...mapState("detail", ["cityList"]),
  },
}
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  width: 1440px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
}
</style>